<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线上下拉菜单</title>
    <style>
        *{  margin: 0;  padding: 0;  border: 0;  list-style: none;  }
        .all{  margin: 100px auto 0;  width: 340px;  height: 30px;  background: url("images/bg.jpg") no-repeat;  }
        .all li{  width: 100px;  height: 30px;  background: url("images/libg.jpg") no-repeat;  float: left;  margin-left: 10px;  line-height: 30px;  text-align: center;  cursor: pointer; position: relative;  }
        .all li li{  margin: 0;  }
       .all ul{  display: none; position: absolute;  left:0;  right:30px; }
        .banner {width: 980px;height: 400px;margin: 0 auto;background: pink;}
    </style>
</head>
<body>
    <ul class="all">
        <li id="li01">
            <span>一级菜单</span>
            <ul id="ul01">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li02">
            <span>一级菜单</span>
            <ul id="ul02">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li03">
            <span>一级菜单</span>
            <ul id="ul03">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
    <div class="banner">萨克达实际上空间大手机端快捷奥斯卡大事记奥斯卡大家四大会计师电视剧安居客社交恐惧</div>
    <script>
        function toggle(li_id,ul_id){
            var  oli = document.getElementById(li_id);
            var  oul = document.getElementById(ul_id);
            oli.onmouseover = function(){
                oul.style.display = "block";
            }
            oli.onmouseout = function(){
                oul.style.display = "none";
            }
        }
        toggle("li01","ul01");
        toggle("li02","ul02");
        toggle("li03","ul03");
    </script>
</body>
</html>